<template>
  <div class="top-right-btn">
    <el-row>
      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
        <el-button :size="size" circle icon="icon-search" @click="toggleSearch()" />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button :size="size" circle icon="icon-refresh" @click="refresh()" />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
        <el-button :size="size" circle icon="icon-application-menu" @click="showColumn()" />
      </el-tooltip>
    </el-row>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" v-model="open" append-to-body :show-close="false" draggable :fullscreen="fullscreen">
      <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <span :id="titleId" :class="titleClass">{{title}}</span>
        <div>
          <component
        style="cursor:pointer;line-height: 24px;margin-right:10px;"
        v-if="fullscreen==false"
              @click="fullscreen=true"
              class="menu-icon"
              theme="outline"
              size="14"
              strokeWidth="3"
              :is="'icon-full-screen-one'"
            />
            <component
            v-else
        style="cursor:pointer;line-height: 24px;margin-right:10px;"
              @click="fullscreen=false"
              class="menu-icon"
              theme="outline"
              size="14"
              strokeWidth="3"
              :is="'icon-off-screen-one'"
            />
        <component
        style="cursor:pointer;line-height: 24px;"
              @click="close"
              class="menu-icon"
              theme="outline"
              size="14"
              strokeWidth="3"
              :is="'icon-close'"
            />
        </div>
        
      </div>
    </template>
      <el-transfer
        :titles="['显示', '隐藏']"
        v-model="value"
        :data="columns"
        @change="dataChange"
      ></el-transfer>
    </el-dialog>
  </div>
</template>
<script>
import { computed, ref ,reactive,defineComponent} from 'vue'
import { useStore } from 'vuex'


export default defineComponent({
  
  props:{
        showSearch: {
          type: Boolean,
          default: true,
        },
        columns: {
          type: Array,
        },
  },
  
   setup(props,context){
     const store = useStore()
      // 显隐数据
      let value= ref([])
      // 弹出层标题
      let title=ref("显示/隐藏")
      //是否全屏
      let fullscreen=ref(false)
      // 是否显示弹出层
      let open= ref(false)

      const size = computed(() => {
        return store.getters['setting/size'];
      });
       const methods = {
           // 搜索
            toggleSearch(){
              context.emit("showSearchClick", !props.showSearch);
            },
            // 刷新
            refresh() {
               context.emit("queryTable");
            },
            // 右侧列表元素变化
            dataChange(data) {
                  for (var item in props.columns) {
                    const key = props.columns[item].key;
                    props.columns[item].visible = !data.includes(key);
                  }
            },
            // 打开显隐列dialog
            showColumn(){
                  this.open = true;
            }
       }
       return {
           ...methods,
           value,
           title,
           open,
           fullscreen,
           size

       }
   } 
})

</script>
<style lang="scss" scoped>
.top-right-btn{
  position: absolute;
  right: 0;
  margin-right: 40px;
}

::v-deep(.el-transfer__button) {
  border-radius: 50%;
  padding: 12px;
  display: block;
  margin-left: 0px;
}
::v-deep(.el-transfer__button:first-child) {
  margin-bottom: 10px;
}
</style>
